<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

   <div v-if="flag">
       <label for="username">用户名</label>
       <input type="text" id="username" placeholder="请输入用户名" key="aa1">
   </div>

    <div v-else>
        <label for="email">邮箱</label>
        <input type="text" id="email" placeholder="请输入邮箱" key="aa">
    </div>

    <button @click="fun()">按钮切换</button>



</div>
<!-- vue js库-->
<script src="../vue.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            flag: true,
        },
        methods:{
          fun(){
              this.flag=!this.flag
          }
        }
    })
</script>

<!--按钮切换的时候 内容会被带到下一个元素  为什么  vue在dom渲染时会尽可能复用已经存在的元素
     <input type="text" id="username" placeholder="请输入用户名" value=123 >

    复用只改变 变化的属性


    如果不希望出现复用 可以给标签 添加 不同的  key  标记

         <input type="text" id="email" placeholder="请输入邮箱" value=123 >
     -->

</body>
</html>